<template>
  <div class="dashboard-container">
    <!-- 头部导航栏 -->
    <div class="header-t">
      <div class="nav-left">
        <SelectTime ref="timeRef" @changeTime="changeSTime" />
      </div>
      <div class="title">工厂智能可视化大屏</div>
      <div class="nav-right">
        <div class="flBtn" @click="fluch">刷新</div>
        <span class="date">{{ currentDate }}</span>
        <span class="time">{{ currentTime }}</span>
        <div v-if="!showType">
          <img style="width: 24px; height: 24px; cursor: pointer" @click="fullScreen" src="../images/sf.png" alt="" />
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <!-- 第一行图表 -->
      <div class="row">
        <!-- 承诺客户达成率趋势 -->
        <div class="panel">
          <div class="header">
            <div class="panel-header">
              <div class="panel-title">承诺客户达成率趋势</div>
            </div>
            <div class="filter-dropdown">
              <WorkShop @change="changeWorkshopCustomerAchievement" multiple />
            </div>
          </div>
          <div class="panel-chart" id="customer-achievement-chart"></div>
        </div>

        <!-- 生产计划达成率趋势 -->
        <div class="panel">
          <div class="header">
            <div class="panel-header">
              <div class="panel-title">生产计划达成率趋势</div>
            </div>
            <div class="filter-dropdown">
              <WorkShop @change="changeWorkshopProductionAchievement" multiple />
            </div>
          </div>
          <div class="panel-chart" id="production-achievement-chart"></div>
        </div>
      </div>

      <!-- 第二行图表 -->
      <div class="row">
        <!-- 产能效率趋势 -->
        <div class="panel">
          <div class="header">
            <div class="panel-header">
              <div class="panel-title">产能效率趋势</div>
            </div>
            <div class="filter-dropdown">
              <WorkShop @change="changeWorkshopEfficiency" multiple />
            </div>
          </div>
          <div class="panel-chart" id="efficiency-chart"></div>
        </div>

        <!-- 车间在手订单头数趋势 -->
        <div class="panel">
          <div class="header">
            <div class="panel-header">
              <div class="panel-title">车间在手订单头数趋势</div>
            </div>
            <div class="panel-filters">
              <div class="filter-dropdown">
                <WorkShop @change="changeComplaintOrder" :multiple="false" />
              </div>
            </div>
          </div>
          <div class="panel-chart" id="order-chart"></div>
        </div>
      </div>

      <!-- 第三行图表 -->
      <div class="row">
        <!-- 报废率趋势 -->
        <div class="panel">
          <div class="header">
            <div class="panel-header">
              <div class="panel-title">报废率趋势</div>
            </div>
            <div class="panel-filters">
              <div class="filter-dropdown">
                <WorkShop @change="changeScrapRate" multiple />
              </div>
            </div>
          </div>
          <div class="panel-chart" id="scrap-rate-chart"></div>
        </div>

        <!-- 客诉率趋势 -->
        <div class="panel">
          <div class="header">
            <div class="panel-header">
              <div class="panel-title">客诉率趋势</div>
            </div>
            <div class="panel-filters">
              <div class="filter-dropdown">
                <WorkShop @change="changeComplaintRate" multiple />
              </div>
            </div>
          </div>
          <div class="panel-chart" id="complaint-rate-chart"></div>
        </div>

        <!-- 退货率趋势 -->
        <div class="panel">
          <div class="header">
            <div class="panel-header">
              <div class="panel-title">退货率趋势</div>
            </div>
            <div class="panel-filters">
              <div class="filter-dropdown">
                <WorkShop @change="changeWorkshop" multiple />
              </div>
            </div>
          </div>
          <div class="panel-chart" id="return-rate-chart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入 ECharts
import * as echarts from "echarts";
import SelectTime from "./time.vue";
import WorkShop from "./workShop.vue";

import { workshop, lineList } from "@/api/common.js";

import {
  complaintRateTrend,
  returnRateTrend,
  orderHeadCountTrend,
  productionCapacityEfficiency,
  productionPlanAchievementRate,
  commitCustomerAchievementRate,
  scrapRateTrend,
} from "@/api/workshopLargeScreen.js";

export default {
  name: "FactoryDashboard",
  data() {
    return {
      currentDate: "",
      currentTime: "",
      timeRef: null,
      workShop1: "",
      workShop2: "",
      workShop3: "",
      workShop4: "",
      workShop5: "",
      workShop6: "",
      workShop7: "",
      workShopList: [],
      startTime: "",
      endTime: "",
      timeType: "1",
      colorList: [
        "#4dabf7",
        "#38d9a9",
        "#ffe066",
        // "#F2F2F2",
        "#00FFFF",
        "#95F20",
        "#FFFF00",
        "F59A23",
        "D9001B",
        "8400FF",
      ],
    };
  },
  props: ["showType"],
  components: {
    SelectTime,
    WorkShop,
  },
  mounted() {
    this.getWorkshop();
    this.initTime();
    this.initCharts();
    this.fetchReturnRateData();
    this.fetchOrderData();
  },
  methods: {
    fluch() {
      this.fetchOrderData();
      this.fetchComplaintRateData();
      this.fetchReturnRateData();
      this.fetchEfficiencyData();
      this.fetchCustomerAchievementData();
      this.fetchProductionAchievementData();
      this.fetchScrapRateData();
    },
    changeSTime(val) {
      this.startTime = val.start;
      this.endTime = val.end;
      this.timeType = val.type;

      console.log(this.startTime, this.endTime, this.timeType);

      this.getWorkshop();
    },
    changeComplaintOrder(val) {
      this.workShop6 = [val];
      this.fetchOrderData();
    },
    changeWorkshopEfficiency(val) {
      this.workShop3 = val;
      this.fetchEfficiencyData();
    },
    changeScrapRate(val) {
      this.workShop4 = val;
      this.fetchScrapRateData();
    },
    changeWorkshopCustomerAchievement(val) {
      this.workShop1 = val;
      this.fetchCustomerAchievementData();
    },
    changeWorkshopProductionAchievement(val) {
      this.workShop2 = val;
      this.fetchProductionAchievementData();
    },
    async getWorkshop() {
      const res = await workshop();

      this.workShopList = res.data.data.records.map((item) => {
        return {
          value: item.id,
          label: item.workshopName,
        };
      });

      console.log(111111111111);

      this.fetchOrderData();
      this.fetchComplaintRateData();
      this.fetchReturnRateData();
      this.fetchEfficiencyData();
      this.fetchCustomerAchievementData();
      this.fetchProductionAchievementData();
      this.fetchScrapRateData();
    },
    fullScreen() {
      window.open("/#/O3-factory");
      this.$emit("isFullScreen", true);
    },
    changeWorkshop(val) {
      this.workShop5 = val;
      this.fetchReturnRateData();
    },
    changeComplaintRate(val) {
      this.workShop7 = val;
      this.fetchComplaintRateData();
      console.log("workshop", val);
    },
    changeTime(val) {
      console.log("val", val);
    },
    changeTime1(val) {
      console.log("val", val);
    },
    changeTime2(val) {
      console.log("val", val);
    },
    changeTime3(val) {
      this.startTime = val.start;
      this.endTime = val.end;
      this.timeType = val.type;
      this.fetchOrderData();
    },
    changeTime4(val) {
      console.log("val", val);
    },

    changeTime6(val) {
      this.startTime = val.start;
      this.endTime = val.end;
      this.timeType = val.type;
      this.fetchReturnRateData();
    },
    initTime() {
      // 初始化时间
      const now = new Date();
      this.currentDate = this.formatDate(now);
      this.currentTime = this.formatTime(now);

      // 每秒更新时间
      setInterval(() => {
        this.currentTime = this.formatTime(new Date());
      }, 1000);
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    formatTime(date) {
      const hours = date.getHours().toString().padStart(2, "0");
      const minutes = date.getMinutes().toString().padStart(2, "0");
      const seconds = date.getSeconds().toString().padStart(2, "0");
      return `${hours}:${minutes}:${seconds}`;
    },
    initCharts() {
      // 初始化承诺客户达成率趋势图表
      const customerAchievementChart = echarts.init(
        document.getElementById("customer-achievement-chart")
      );
      customerAchievementChart.setOption(this.getCustomerAchievementOption());
      // 初始化生产计划达成率趋势图表
      const productionAchievementChart = echarts.init(
        document.getElementById("production-achievement-chart")
      );
      productionAchievementChart.setOption(
        this.getProductionAchievementOption()
      );
      // 初始化产能效率趋势图表
      const efficiencyChart = echarts.init(
        document.getElementById("efficiency-chart")
      );
      efficiencyChart.setOption(this.getEfficiencyOption());
      // 初始化车间在手订单头数趋势图表
      const orderChart = echarts.init(document.getElementById("order-chart"));
      orderChart.setOption(this.getOrderOption());
      // 初始化报废率趋势图表
      const scrapRateChart = echarts.init(
        document.getElementById("scrap-rate-chart")
      );
      scrapRateChart.setOption(this.getScrapRateOption());
      // 初始化客诉率趋势图表
      const complaintRateChart = echarts.init(
        document.getElementById("complaint-rate-chart")
      );
      complaintRateChart.setOption(this.getComplaintRateOption());
      // 初始化退货率趋势图表
      const returnRateChart = echarts.init(
        document.getElementById("return-rate-chart")
      );
      returnRateChart.setOption(this.getReturnRateOption());
      // 窗口大小改变时，重新调整图表大小
      window.addEventListener("resize", () => {
        customerAchievementChart.resize();
        productionAchievementChart.resize();
        efficiencyChart.resize();
        orderChart.resize();
        scrapRateChart.resize();
        complaintRateChart.resize();
        returnRateChart.resize();
      });
    },
    getCustomerAchievementOption(res) {
      let series = this.workShop1.map((item, index) => {
        return {
          name: this.workShopList.find((its) => its.value == item).label,
          type: "line",
          data: res.data.data[item + "_line"],
          symbol: "circle",
          symbolSize: 6,
          lineStyle: {
            width: 1,
            color: this.colorList[index],
          },
          itemStyle: {
            color: this.colorList[index],
          },
        };
      });

      let selWorkName = this.workShopList.map((item) => {
        return item.label;
      });

      return {
        grid: {
          left: "3%",
          right: "3%",
          bottom: "10%",
          top: "14%",
          containLabel: true,
        },
        type: "time",
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            // params 是一个数组，包含了每个系列的数据
            let tooltipContent = "";
            var xAxisValue = params[0].name;
            tooltipContent =
              "<div style='margin-bottom:6px'>" + xAxisValue + "</div>";
            params.forEach(function (item) {
              var colorDot =
                '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:' +
                item.color +
                ';"></span>';

              tooltipContent +=
                colorDot +
                item.seriesName +
                ":" +
                `  <div style="display:inline-block;margin:0 5px;font-weight:600">${item.value ? item.value : 0
                }</div>` +
                "%<br/>";
            });
            return tooltipContent;
          },
        },
        legend: {
          data: selWorkName,
          textStyle: {
            color: "#333",
          },
          bottom: 0,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: res.data.data.xAxis,
          axisLabel: {
            color: "#000",
          },
        },
        yAxis: {
          name: "达成率",
          type: "value",
          position: "right",
          axisLabel: {
            color: "#333",
            formatter: "{value} %",
          },
          splitLine: {
            lineStyle: {
              color: "#ccc",
              type: "dashed",
            },
          },
        },
        series: series,
      };
    },
    getProductionAchievementOption(res) {
      let series = this.workShop2.map((item, index) => {
        return {
          name: this.workShopList.find((its) => its.value == item).label,
          type: "line",
          data: res.data.data[item + "_line"],
          symbol: "circle",
          symbolSize: 6,
          lineStyle: {
            width: 1,
            color: this.colorList[index],
          },
          itemStyle: {
            color: this.colorList[index],
          },
        };
      });

      let selWorkName = this.workShopList.map((item) => {
        return item.label;
      });

      return {
        grid: {
          left: "3%",
          right: "3%",
          bottom: "10%",
          top: "14%",
          containLabel: true,
        },
        type: "time",
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            // params 是一个数组，包含了每个系列的数据
            let tooltipContent = "";
            var xAxisValue = params[0].name;
            tooltipContent =
              "<div style='margin-bottom:6px'>" + xAxisValue + "</div>";
            params.forEach(function (item) {
              var colorDot =
                '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:' +
                item.color +
                ';"></span>';
              tooltipContent +=
                colorDot +
                item.seriesName +
                ":" +
                `  <div style="display:inline-block;margin:0 5px;font-weight:600">${item.value ? item.value : 0
                }</div>` +
                "%<br/>";
            });
            return tooltipContent;
          },
        },
        legend: {
          data: selWorkName,
          textStyle: {
            color: "#333",
          },
          bottom: 0,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: res.data.data.xAxis,
          axisLabel: {
            color: "#000",
          },
        },
        yAxis: {
          name: "达成率",
          type: "value",
          position: "right",
          axisLabel: {
            color: "#333",
            formatter: "{value} %",
          },
          max: 100,
          min: 0,
          splitLine: {
            lineStyle: {
              color: "#ccc",
              type: "dashed",
            },
          },
        },
        series: series,
      };
    },
    getEfficiencyOption(res) {
      let series = this.workShop3.map((item, index) => {
        return {
          name: this.workShopList.find((its) => its.value == item).label,
          type: "line",
          data: res.data.data[item + "_line"],
          symbol: "circle",
          symbolSize: 6,
          lineStyle: {
            width: 1,
            color: this.colorList[index],
          },
          itemStyle: {
            color: this.colorList[index],
          },
        };
      });

      let selWorkName = this.workShopList.map((item) => {
        return item.label;
      });

      return {
        grid: {
          left: "3%",
          right: "3%",
          bottom: "10%",
          top: "14%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            // params 是一个数组，包含了每个系列的数据
            let tooltipContent = "";
            var xAxisValue = params[0].name;
            tooltipContent =
              "<div style='margin-bottom:6px'>" + xAxisValue + "</div>";
            params.forEach(function (item) {
              var colorDot =
                '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:' +
                item.color +
                ';"></span>';
              tooltipContent +=
                colorDot +
                item.seriesName +
                ":" +
                `  <div style="display:inline-block;margin:0 5px;font-weight:600">${item.value ? item.value : 0
                }</div>` +
                "%<br/>";
            });
            return tooltipContent;
          },
        },
        legend: {
          data: selWorkName,
          textStyle: {
            color: "#333",
          },
          bottom: 0,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: res.data.data.xAxis,
          axisLabel: {
            color: "#000",
          },
        },
        yAxis: {
          name: "效率",
          type: "value",
          position: "right",
          axisLabel: {
            color: "#333",
            formatter: "{value} %",
          },
          max: 100,
          min: 0,
          splitLine: {
            lineStyle: {
              color: "#ccc",
              type: "dashed",
            },
          },
        },
        series: series,
      };
    },
    getOrderOption(res) {
      let series = this.workShop6.map((item, index) => {
        return [
          {
            name: "总数",
            type: "bar",
            data: res.data.data[item + "_total"],
            barWidth: "10",

            itemStyle: {
              color: this.colorList[index],
            },
          },
          {
            name: "已完成",
            type: "bar",
            data: res.data.data[item + "_comp"],
            barWidth: "10",

            itemStyle: {
              color: this.colorList[index + 1],
            },
          },

          {
            name: "未完成",
            type: "bar",
            data: res.data.data[item + "_unfin"],
            barWidth: "10",

            itemStyle: {
              color: this.colorList[index + 2],
            },
          },
        ];
      });

      return {
        grid: {
          left: "2%",
          right: "4%",
          bottom: "10%",
          top: "14%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["总数", "已完成", "未完成"],
          textStyle: {
            color: "#333",
          },
          bottom: 0,
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: res.data.data.xAxis,
          axisLabel: {
            color: "#000",
          },
        },
        yAxis: {
          name: "数量(个)",
          type: "value",

          // position: "right",
          axisLabel: {
            color: "#333",
            margin: 15, // 刻度标签与轴线之间的距离，数值越大距离越远
            // show: false 
          },
          // max: 150000,
          // min: 0,
          splitLine: {
            lineStyle: {
              color: "#ccc",
              type: "dashed",
            },
          },
        },
        series: series.flat(Infinity),
      };
    },
    getScrapRateOption(res) {
      let series = this.workShop4.map((item, index) => {
        return {
          name: this.workShopList.find((its) => its.value == item).label,
          type: "line",
          data: res.data.data[item + "_line"],
          symbol: "circle",
          symbolSize: 6,
          lineStyle: {
            width: 1,
            color: this.colorList[index],
          },
          itemStyle: {
            color: this.colorList[index],
          },
        };
      });

      let selWorkName = this.workShopList.map((item) => {
        return item.label;
      });

      return {
        grid: {
          left: "5%",
          right: "3%",
          bottom: "10%",
          top: "14%",
          containLabel: true,
        },
        type: "time",
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            // params 是一个数组，包含了每个系列的数据
            let tooltipContent = "";
            var xAxisValue = params[0].name;
            tooltipContent =
              "<div style='margin-bottom:6px'>" + xAxisValue + "</div>";
            params.forEach(function (item) {
              var colorDot =
                '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:' +
                item.color +
                ';"></span>';
              tooltipContent +=
                colorDot +
                item.seriesName +
                ":" +
                `  <div style="display:inline-block;margin:0 5px;font-weight:600">${item.value ? item.value : 0
                }</div>` +
                "%<br/>";
            });
            return tooltipContent;
          },
        },
        legend: {
          data: selWorkName,
          textStyle: {
            color: "#333",
          },
          bottom: 0,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: res.data.data.xAxis,
          axisLabel: {
            color: "#000",
          },
        },
        yAxis: {
          name: "报废率",
          type: "value",
          position: "right",
          axisLabel: {
            color: "#333",
            formatter: "{value} %",
          },
          max: 100,
          min: 0,
          splitLine: {
            lineStyle: {
              color: "#ccc",
              type: "dashed",
            },
          },
        },
        series: series,
      };
    },
    getComplaintRateOption(res) {
      let series = this.workShop7.map((item, index) => {
        return [
          {
            name: this.workShopList.find((its) => its.value == item).label,
            type: "line",
            yAxisIndex: 0,
            data: res.data.data[item + "_line"].map((item) => item * 100),
            symbol: "circle",
            symbolSize: 6,
            lineStyle: {
              width: 2,
              color: this.colorList[index],
            },
            itemStyle: {
              color: this.colorList[index],
            },
          },
          {
            name: this.workShopList.find((its) => its.value == item).label,
            type: "bar",
            yAxisIndex: 1,
            data: res.data.data[item + "_col"],
            barWidth: "10",

            itemStyle: {
              color: this.colorList[index],
            },
          },
        ];
      });

      return {
        grid: {
          left: "3%",
          right: "3%",
          bottom: "5%",
          top: "14%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let tooltipContent = "";
            var xAxisValue = params[0].name;
            tooltipContent =
              "<div style='margin-bottom:6px'>" + xAxisValue + "</div>";
            params.forEach(function (item) {
              let unit = ""; // 默认无单位
              var colorDot =
                '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:' +
                item.color +
                ';"></span>';
              if (item.seriesType === "bar") unit = " ";
              else if (item.seriesType === "line") unit = "%";
              tooltipContent +=
                colorDot +
                item.seriesName +
                ":" +
                `  <div style="display:inline-block;margin:0 5px;font-weight:600">${item.value ? item.value : 0
                }</div>` +
                unit +
                "<br/>";
            });
            return tooltipContent;
          },
        },
        legend: {
          data: ["ccj"],
          textStyle: {
            color: "#333",
          },
          bottom: 0,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: res.data.data.xAxis,
          axisLabel: {
            color: "#000",
          },
        },
        yAxis: [
          {
            type: "value",
            name: "数量(个)",
            // position: 'right',

            axisLabel: {
              color: "#000",
              margin: 20, // 刻度标签与轴线之间的距离，数值越大距离越远
            },
            splitLine: {
              lineStyle: {
                color: "#ccc",
                type: "dashed",
              },
            },
            itemStyle: {
              color: "#1e88e5",
            },
          },
          {
            type: "value",
            name: "客诉率",
            // position: 'right',
            max: 100,
            min: 0,
            axisLabel: {
              color: "#333",
              formatter: "{value} %",
              margin: 20, // 刻度标签与轴线之间的距离，数值越大距离越远
            },
            splitLine: {
              lineStyle: {
                color: "#ccc",
                type: "dashed",
              },
            },
            itemStyle: {
              color: "#1e88e5",
            },
          },
        ],
        series: series.flat(Infinity),
      };
    },
    getReturnRateOption(res) {
      let series = this.workShop5.map((item, index) => {
        return [
          {
            name: this.workShopList.find((its) => its.value == item).label,
            type: "bar",
            yAxisIndex: 0,
            data: res.data.data[item + "_line"],
            symbol: "circle",
            barWidth: "10",
            symbolSize: 6,
            lineStyle: {
              width: 2,
              color: this.colorList[index],
            },
            itemStyle: {
              color: this.colorList[index],
            },
          },
        ];
      });
      return {
        grid: {
          left: "3%",
          right: "5%",
          bottom: "5%",
          top: "14%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            // params 是一个数组，包含了每个系列的数据
            let tooltipContent = "";
            var xAxisValue = params[0].name;
            tooltipContent =
              "<div style='margin-bottom:6px'>" + xAxisValue + "</div>";
            params.forEach(function (item) {
              var colorDot =
                '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:' +
                item.color +
                ';"></span>';
              tooltipContent +=
                colorDot +
                item.seriesName +
                ":" +
                `  <div style="display:inline-block;margin:0 5px;font-weight:600">${item.value ? item.value : 0
                }</div>` +
                "个<br/>";
            });
            return tooltipContent;
          },
        },
        legend: {
          data: ["ccj"],
          textStyle: {
            color: "#333",
          },
          bottom: 0,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: res.data.data.xAxis,
          axisLabel: {
            color: "#000",
          },
        },
        yAxis: [
          {
            type: "value",
            name: "数量(个)",
            // position: "right",
            axisLabel: {
              color: "#333",
              formatter: "{value}",
              margin: 20,
            },
            max: 100,
            min: 0,
            splitLine: {
              lineStyle: {
                color: "#ccc",
                type: "dashed",
              },
            },
          },
        ],
        series: series.flat(Infinity),
      };
    },

    async fetchCustomerAchievementData() {
      if (
        this.startTime == "" ||
        this.endTime == "" ||
        this.workShop1.length == 0
      ) {
        return;
      }

      let workshopNames = this.workShop1.map((item) => {
        return this.workShopList.find((i) => {
          return i.value == item;
        }).label;
      });

      let data = {
        workshops: this.workShop1,
        type: this.timeType,
        startDate: this.startTime,
        endDate: this.endTime,
        workshopNames,
      };

      const res = await commitCustomerAchievementRate(data);

      if (res) {
        const customerAchievementChart = echarts.init(
          document.getElementById("customer-achievement-chart")
        );
        customerAchievementChart.setOption(
          this.getCustomerAchievementOption(res),
          true
        );
      }
    },

    async fetchProductionAchievementData() {
      console.log("获取生产计划达成率数据接口已调用");
      if (
        this.startTime == "" ||
        this.endTime == "" ||
        this.workShop2.length == 0
      ) {
        return;
      }

      let workshopNames = this.workShop2.map((item) => {
        return this.workShopList.find((i) => {
          return i.value == item;
        }).label;
      });

      let data = {
        workshops: this.workShop2,
        type: this.timeType,
        startDate: this.startTime,
        endDate: this.endTime,
        workshopNames,
      };

      const res = await productionPlanAchievementRate(data);

      if (res) {
        const productionAchievementChart = echarts.init(
          document.getElementById("production-achievement-chart")
        );
        productionAchievementChart.setOption(
          this.getProductionAchievementOption(res),
          true
        );
      }
    },

    async fetchEfficiencyData() {
      if (
        this.startTime == "" ||
        this.endTime == "" ||
        this.workShop3.length == 0
      ) {
        return;
      }

      let workshopNames = this.workShop3.map((item) => {
        return this.workShopList.find((i) => {
          return i.value == item;
        }).label;
      });

      let data = {
        workshops: this.workShop3,
        type: this.timeType,
        startDate: this.startTime,
        endDate: this.endTime,
        workshopNames,
      };

      const res = await productionCapacityEfficiency(data);

      if (res) {
        const efficiencyChart = echarts.init(
          document.getElementById("efficiency-chart")
        );
        efficiencyChart.setOption(this.getEfficiencyOption(res), true);
      }
    },

    fetchOrderData() {
      if (this.startTime == "" || this.endTime == "") {
        return;
      }
      let data = {
        workshops: this.workShop6,
        type: this.timeType,
        startDate: this.startTime,
        endDate: this.endTime,
      };

      orderHeadCountTrend(data).then((res) => {
        if (res) {
          const orderChart = echarts.init(
            document.getElementById("order-chart")
          );
          orderChart.setOption(this.getOrderOption(res), true);
        }
      });
    },

    fetchScrapRateData() {
      console.log("获取报废率趋势数据接口已调用");

      if (
        this.startTime == "" ||
        this.endTime == "" ||
        this.workShop4.length == 0
      ) {
        return;
      }

      let workshopNames = this.workShop4.map((item) => {
        return this.workShopList.find((i) => {
          return i.value == item;
        }).label;
      });

      let data = {
        workshops: this.workShop4,
        type: this.timeType,
        startDate: this.startTime,
        endDate: this.endTime,
        workshopNames,
      };
      scrapRateTrend(data).then((res) => {
        if (res) {
          const scrapRateChart = echarts.init(
            document.getElementById("scrap-rate-chart")
          );
          scrapRateChart.setOption(this.getScrapRateOption(res), true);
        }
      });
    },

    async fetchComplaintRateData() {
      if (this.startTime == "" || this.endTime == "") {
        return;
      }

      let data = {
        workshops: this.workShop7,
        type: this.timeType,
        startDate: this.startTime,
        endDate: this.endTime,
      };

      if (this.workShop7.length == 0) {
        return;
      }

      const res = await complaintRateTrend(data);

      if (res) {
        // 初始化客诉率趋势图表
        const complaintRateChart = echarts.init(
          document.getElementById("complaint-rate-chart")
        );
        complaintRateChart.setOption(this.getComplaintRateOption(res), true);
      }
    },

    async fetchReturnRateData() {
      if (this.startTime == "" || this.endTime == "") {
        return;
      }
      let data = {
        workshops: this.workShop5,
        type: this.timeType,
        startDate: this.startTime,
        endDate: this.endTime,
      };

      if (this.workShop5.length == 0) {
        return;
      }

      const res = await returnRateTrend(data);

      if (res) {
        // 初始化退货率趋势图表
        const returnRateChart = echarts.init(
          document.getElementById("return-rate-chart")
        );
        returnRateChart.setOption(this.getReturnRateOption(res), true);
      }
    },
  },
};
</script>

<style scoped>
.dashboard-container {
  font-family: "Arial", sans-serif;
  /* background-color: #ebf8fe; */
  color: #fff;
  padding: 0 10px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-t {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  background: #fff;
  margin-bottom: 10px;
}

.nav-left {
  display: flex;
  align-items: center;
}

.flBtn {
  border: 1px solid #1e88e5;
  color: #1e88e5;
  padding: 4px 20px;
  margin-left: 20px;
  border-radius: 5px;
  cursor: pointer;
}

.home-icon {
  margin-right: 10px;
  font-size: 20px;
}

.title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.nav-right {
  display: flex;

  align-items: center;
}

.date,
.time {
  color: #333;
  font-size: 16px;
  font-weight: 600;
  margin: 3px 10px;
}

.content {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.panel {
  background-color: #fff;
  border: 1px solid #63b1d3;
  border-radius: 5px;
  padding: 10px;

  flex: 1;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.panel-title {
  font-size: 14px;
  font-weight: bold;
  color: #555555;
}

.view-report {
  background-color: transparent;
  border: 1px solid #1e88e5;
  color: #1e88e5;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  margin-left: 10px;
}

.panel-filters {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 0 5px;
}

.filter-dropdown {
  border-radius: 3px;
  padding: 0 5px;
  color: #fff;
  cursor: pointer;
}

.filter-icon {
  margin-left: 5px;
  font-size: 12px;
}

.panel-chart {
  height: 260px;
  width: 100%;
}

.row:nth-child(3) {
  display: flex;
  gap: 10px;
}

.row:nth-child(3) .panel {
  flex: 1;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* 禁用滚动条 */
}
</style>
